<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wav转silk</title>
    <!-- 引入 Element UI 的 CSS 文件 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
</head>
<style>
    html, body {
        margin: 0;
        padding: 0;
        background-color: #F1F5F9;
    }

    #app {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        height: 100vh;
    }

    .box {
        width: 80%;
        height: 500px;
        border-radius: 20px;
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, .1);
        padding: 30px;
        box-sizing: border-box;
        position: relative;
    }

    .title {
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .footer-box {
        position: absolute;
        right: 30px;
        bottom: 30px;
    }

    .logo {
        width: 100px;
        cursor: pointer;
    }
</style>
<body>
<div id="app">
    <div class="box">
        <div class="title">wav转silk</div>
        <el-form label-width="90px" v-loading="loading">
            <el-form-item label="上传文件">
                <el-upload
                        class="upload-demo"
                        action="random"
                        :on-success="handleSuccess"
                        :before-upload="beforeUpload"
                        :limit="1"
                        :http-request="upFun"
                        :file-list="uploadedFiles"
                        accept=".wav"
                        multiple>
                    <el-button type="primary">点击上传</el-button>
                    <div slot="tip" class="el-upload__tip">上传wav文件，且不超过20MB</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="采码率：">
                <el-input v-model="samplingRate" style="max-width: 300px;"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submit">确定</el-button>
                <el-button @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="footer-box">
            <img src="/assets/html/logo.svg" class="logo" alt="logo" @click="openGitee"/>
        </div>
    </div>

    <el-dialog
            title="点击下载"
            :visible.sync="dialogVisible"
            width="400px">
        <a :href="downloadUrl">{{downloadUrl}}</a>
        <div style="margin-top: 10px;">时长：{{duration}}</div>
        <el-button @click="downloadFile" type="primary" style="margin-top: 20px;">下载文件</el-button>

        </span>
    </el-dialog>
</div>

<!-- 引入 Vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<!-- 引入 Element UI 的 JavaScript 文件 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    // 创建 Vue 实例
    new Vue({
        el: '#app',
        data: {
            uploadedFiles: [],
            samplingRate: null,
            formData: null,
            dialogVisible: false,
            downloadUrl: null,
            loading: false,
            duration:0
        },
        methods: {
            reset() {
                this.uploadedFiles = []
                this.samplingRate = null;
                this.formData = null
            },
            downloadFile() {
                const url = this.downloadUrl;
                const link = document.createElement('a');
                link.href = url;
                let currentTime = new Date().getTime();
                link.download = `${currentTime}.silk`; // 指定下载的文件名
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
            },
            submit() {
                if (!this.samplingRate) {
                    this.$message.error('请输入采码率');
                    return;
                }
                this.formData.append('SampleRate', this.samplingRate);
                this.loading = true
                fetch('/', {
                    method: 'POST',
                    body: this.formData,
                })
                    .then(response => response.text()) // 根据你的API响应类型，这里可能需要调整
                    .then(data => {
                        const newData = JSON.parse(data);
                        console.log('文件上传成功，响应URL:', newData.url);
                        this.downloadUrl = newData.url
                        this.duration = newData.duration
                        // 这里可以添加更多的逻辑来处理响应，例如重定向到返回的URL
                        this.dialogVisible = true
                        this.reset()
                        this.loading = false
                    })
                    .catch(error => {
                        console.error('文件上传失败:', error);
                        this.reset()
                        this.loading = false
                    });
            },
            upFun(file) {

                this.formData = new FormData();
                this.formData.append('file', file.file);

            },
            openGitee() {
                window.open('https://gitee.com/ruiange/wav2silk');
            },
            beforeUpload(file) {
                const isLegal = this.checkFile(file);
                if (!isLegal) {
                    this.$message.error('上传文件格式不正确!');
                }
                return isLegal;
            },
            handleSuccess(response, file, fileList) {
                this.uploadedFiles.push(file.name);
            },
            checkFile(file) {
                // 这里可以添加文件类型检查逻辑，例如只允许上传图片
                const isLegal = file.type.startsWith('audio/wav');
                if (!isLegal) {
                    //this.$message.error('上传文件格式不正确!');
                    return false
                }
                return isLegal;
            }
        }
    });
</script>
</body>
</html>